<!--
 作者：ex_wangshuai
 日期：2016-11-01
 功能：首页-热门品牌
 参数：
 事件：
-->
<template>
  <div class="brand">
    <div class="loading-box">
      <img src="../../../static/img/loading.gif" class="loading">
    </div>
    <toolbar :view-title="'热门品牌'">
      <div
        class="leftButton"
        type="button"
        @click="this.$broadcast('goBack')"
        slot="left-button">&nbsp;
      </div>
      <div class="rightButton"
           type="button"
           slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <!-- <condition-filter :condition-list="conditionList">
    </condition-filter> -->
    <time-filter :time-list="timeList" v-show="brandId == 0">
    </time-filter>

    <div class="content" v-show="brandId == 0">
      <section class="section">
        <div class="sub-title-text">{{chartsTitle1 | wordFilter}}</div>
        <div class="time">{{pingtai}}</div>
        <div v-if="startTime1" class="time">{{startTime1 | formatDate}} - {{endTime1 | formatDate}}</div>
        <div class="chartContainer" v-show="charts1.length">
        </div>
        <div class="item-data" v-if="!charts1.length">
          暂无数据
        </div>
      </section>
      <div class="split-line"></div>

      <section class="section">
        <div class="sub-title-text">{{chartsTitle2 | wordFilter}}</div>
        <div class="time">{{pingtai}}</div>
        <div v-if="startTime2" class="time">{{startTime2 | formatDate}} - {{endTime2 | formatDate}}</div>
        <div class="chartContainer" v-show="charts2.length">
        </div>
        <div class="item-data" v-if="!charts2.length">
          暂无数据
        </div>
      </section>
      <div class="split-line"></div>

      <section class="section">
        <div class="sub-title-text">{{chartsTitle3 | wordFilter}}</div>
        <div class="time">{{pingtai}}</div>
        <div v-if="startTime3" class="time">{{startTime3 | formatDate}} - {{endTime3 | formatDate}}</div>
        <div class="chartContainer" v-show="charts3.length">
        </div>
        <div class="item-data" v-if="!charts3.length">
          暂无数据
        </div>
      </section>
    </div>

    <div class="blackBrand" v-show="brandId == 1">敬请期待</div>

    <filter-view v-show="filterOpenState"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :choose-platforms= "pingtai"
                 :choose-platforms-id= "pingtaiId"
                 :page-id="'brandMonitor'">
    </filter-view>
    <loading :show="showLoading"></loading>
    <confirm :show.sync="timeoutStatus"
             title="加载失败,您可以"
             cancel-text="返回首页"
             confirm-text="重新加载"
             @on-cancel="this.$route.router.go('/home')"
             @on-confirm="reload">
    </confirm>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import ConditionFilter from '../common/ConditionFilter.vue'
  import TimeFilter from '../common/TimeFilter.vue'
  import FilterView from '../common/FilterView.vue'
//  import Echarts from 'echarts/lib/echarts.js'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  import Loading from 'vux/dist/components/Loading'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      ConditionFilter,
      TimeFilter,
      FilterView,
      Loading,
      Confirm
    },
    data () {
      var data = {}
      data.pingtai = ''
      data.pingtaiId = ''
      data.show = false
      data.timeoutStatus = false
      data.showLoading = false
      data.xiaoliang = ''
      data.startTime1 = ''
      data.endTime1 = ''
      data.startTime2 = ''
      data.endTime2 = ''
      data.startTime3 = ''
      data.endTime3 = ''
      data.defaultOrgId = ''
      data.defaultCategory = ''
      data.defaultCategoryId = ''
      data.testData = 1
      data.brandId = 0
      data.brandDateId = 0
      data.fontSize = 0.27
      data.viewTitle = '品牌监控'
      data.filterOpenState = false
      data.conditionList = [
        {'id': 0, 'value': 'myBrand', 'text': '品牌热度'}
        // 暂时去掉
        // {'id': 1, 'value': 'allBrand', 'text': '黑马品牌'}
      ]
      data.timeList = [
        {'id': 0, 'value': 'day', 'text': '日'},
        {'id': 1, 'value': 'week', 'text': '周'},
        {'id': 2, 'value': 'month', 'text': '月'},
        {'id': 3, 'value': 'year', 'text': '年'}
      ]
      data.chartsTitle1 = ''
      data.chartsTitle2 = ''
      data.chartsTitle3 = ''
      data.chartsYaxis1 = []
      data.chartsYaxis2 = []
      data.chartsYaxis3 = []
      data.chartsXaxis1 = []
      data.chartsXaxis2 = []
      data.chartsXaxis3 = []
      data.charts1 = []
      data.charts2 = []
      data.charts3 = []
      data.brandUrl = ''
      data.brandParam = {
        mkey: 'brandMonitor',
        datePeriod: 'month',
        tabId: 'heatBrands',
        refresh: true,
        category_id: '',
        category: '',
        platform: '',
        platform_id: ''
      }
      return data
    },
    events: {
      // 页面条件改变时请求
      'changeCondition': function (id) {
        this.brandId = id
      },
      // 时间改变时请求
      'changeDate': function (dateId) {
        this.brandDateId = dateId
        this.brandParam.datePeriod = dateId
        this.showLoading = true
        this.getEchartBatData(this.brandUrl, this.brandParam)
      },
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
        this.showLoading = true
        this.brandParam.category = filterConditions.category
        this.brandParam.category_id = filterConditions.category_id
        this.brandParam.platform = filterConditions.platform
        this.brandParam.platform_id = filterConditions.platform_id
        this.getEchartBatData(this.brandUrl, this.brandParam)
      }
    },
    watch: {
      chartsXaxis3: function () {
        var BarOption1 = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>销量' + this.xiaoliang + ':{c}',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['销额(万元)'],
            selectedMode: false,
            itemWidth: 11,
            itemHeight: 11,
            top: 0,
            right: '1%',
            textStyle: {
              color: '#999999'
            }
          },
          grid: {
            left: '5%',
            right: '15%',
            bottom: '-1%',
            top: '17%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: this.chartsYaxis1,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(215, 215, 215)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: this.fontSize
              }
            }
          },
          series: {
            type: 'bar',
            name: '销额(万元)',
            data: this.chartsXaxis1,
            barWidth: 23,
            label: {
              normal: {
                show: true, // 必须加
                position: 'right',
                formatter: '{c}',
                textStyle: {
                  color: '#666666',
                  fontSize: this.fontSize
                }
              }
            }
          },
          color: ['#4A90E2', '#BCDBFF']
        }
        var BarOption2 = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>销额(万元):{c}',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // data: ['销额(万元)'],
            data: ['销量' + this.xiaoliang],
            selectedMode: false,
            itemWidth: 11,
            itemHeight: 11,
            top: 0,
            right: '2%',
            textStyle: {
              color: '#999999'
            }
          },
          grid: {
            left: '5%',
            right: '21%',
            bottom: '-1%',
            top: '17%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitNumber: 2,
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: this.chartsYaxis2,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(215, 215, 215)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: this.fontSize
              }
            }
          },
          series: {
            type: 'bar',
            // name: ['销额(万元)'],
            name: ['销量' + this.xiaoliang],
            data: this.chartsXaxis2,
            barWidth: 23,
            label: {
              normal: {
                show: true, // 必须加
                position: 'right',
                formatter: '{c}',
                textStyle: {
                  color: '#666666',
                  fontSize: this.fontSize
                }
              }
            }
          },
          color: ['#8BB4FF', '#BCDBFF']
        }
        var BarOption3 = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>评论总数:{c}',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['评论总数'],
            selectedMode: false,
            itemWidth: 11,
            itemHeight: 11,
            top: '3%',
            right: '3%',
            textStyle: {
              color: '#999999'
            }
          },
          grid: {
            left: '5%',
            right: '15%',
            bottom: '-1%',
            top: '17%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitNumber: 2,
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: this.chartsYaxis3,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(215, 215, 215)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: this.fontSize
              }
            }
          },
          series: {
            type: 'bar',
            name: '评论总数',
            data: this.chartsXaxis3,
            barWidth: 23,
            label: {
              normal: {
                show: true, // 必须加
                position: 'right',
                formatter: '{c}',
                textStyle: {
                  color: '#666666',
                  fontSize: this.fontSize
                }
              }
            }
          },
          color: ['#B889FF', '#BCDBFF']
        }
        this.$nextTick(function () {
          // 返回的数据需要用echarts显示的
          this.showLoading = false
          var chartDomLength = document.getElementsByClassName('chartContainer').length
          var chartDomArray = new Array(chartDomLength)
          for (var x = 0; x < chartDomLength; x++) {
            chartDomArray[x] = document.getElementsByClassName('chartContainer')[x]
            this.myChart = window.Echarts.init(chartDomArray[x])
            if (x === 0) {
              this.myChart.setOption(BarOption1)
            } else if (x === 1) {
              this.myChart.setOption(BarOption2)
            } else if (x === 2) {
              this.myChart.setOption(BarOption3)
            }
          }
        })
      }
    },
    methods: {
      reload: function () {
        window.location.reload()
      },
      goBack: function () {
//        window.history.back()
        this.show = true
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        }
      },
      showFilter: function () {
        this.filterOpenState = true
      },
      doFilter: function () {
        this.$broadcast('doFilter')
      },
      getEchartBatData: function (url, params) {
        this.$http.post(url, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          var data = res.json()
          this.defaultOrgId = data.org_code
          this.defaultCategory = data.category
          this.defaultCategoryId = data.category_id
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id || ''
          this.$broadcast('loadDataDone')
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var brandData = res.json()
          var chartsYaxis1 = []
          var chartsYaxis2 = []
          var chartsYaxis3 = []
          var chartsXaxis1 = []
          var chartsXaxis2 = []
          var chartsXaxis3 = []
          this.xiaoliang = brandData.chartDatas[0].saleUnit
          this.startTime1 = brandData.chartDatas[0].starttime
          this.endTime1 = brandData.chartDatas[0].endtime
          this.startTime2 = brandData.chartDatas[1].starttime
          this.endTime2 = brandData.chartDatas[1].endtime
          this.startTime3 = brandData.chartDatas[2].starttime
          this.endTime3 = brandData.chartDatas[2].endtime
          this.chartsTitle1 = brandData.chartDatas[0].subTitle
          this.chartsTitle2 = brandData.chartDatas[1].subTitle
          this.chartsTitle3 = brandData.chartDatas[2].subTitle
          this.charts1 = brandData.chartDatas[0].detail
          this.charts2 = brandData.chartDatas[1].detail
          this.charts3 = brandData.chartDatas[2].detail
          // 纵坐标品牌 横坐标数值
          for (var i = 0; i < this.charts1.length; i++) {
            chartsYaxis1.push(this.charts1[i].brand)
            chartsXaxis1.push(this.charts1[i].sales_amount)
            // chartsXaxis1.push(this.charts1[i].sales)
          }
          for (var j = 0; j < this.charts2.length; j++) {
            chartsYaxis2.push(this.charts2[j].brand)
            chartsXaxis2.push(this.charts2[j].sales)
            // chartsXaxis2.push(this.charts2[j].sales_amount)
          }
          for (var k = 0; k < this.charts3.length; k++) {
            chartsYaxis3.push(this.charts3[k].brand)
            chartsXaxis3.push(this.charts3[k].score_total)
          }
          // 纵坐标品牌
          this.chartsYaxis1 = chartsYaxis1
          this.chartsYaxis2 = chartsYaxis2
          this.chartsYaxis3 = chartsYaxis3
          // 横坐标数值
          this.chartsXaxis1 = chartsXaxis1
          this.chartsXaxis2 = chartsXaxis2
          this.chartsXaxis3 = chartsXaxis3
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    created () {
      this.brandUrl = window.interface.productMonitor.brandHot
      this.getEchartBatData(this.brandUrl, this.brandParam)
      var fontSize = parseInt(document.documentElement.style.fontSize)
      this.fontSize = fontSize * this.fontSize
    },
    filters: {
      wordFilter: function (value) {
        if (value.length > 16) {
          return value.substring(0, 16)
        } else {
          return value
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .brand {
    margin-top: 7vh;
  }
  .content {
    height: 73vh;
    overflow-y: scroll;
  }
  .section{
    position: relative;
    height: 10rem;
    width: 100%;
  }
  .chartContainer{
    height: 100%;
    width: 100%;
  }

  .sub-title-text {
    position: absolute;
    left: 0;
    top: 3%;
    font-size: 0.32rem;
    color: #333333;
    padding-left: .7rem;
    background: url('../../../static/img/time-title.png') no-repeat .3rem center / .28rem .26rem;
  }
  .time {
    position: relative;
    float: left;
    top: 9%;
    font-size: .26rem;
    background: url('../../../static/img/time-time.png') no-repeat center right;
    background-position: .3rem center;
    background-size: .3rem .24rem;
    padding-left: .7rem;
    height: 3vh;
    line-height: 3vh;
  }

  .split-line {
    width: 100%;
    height: 5px;
    background: #f2f2f2;
  }

  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../static/img/btn-back.png') no-repeat center center;
    background-size: 100%;
  }
  .blackBrand{
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 0.5rem;
  }
  .filterButton{
    margin-right: 0.25rem;
  }
</style>
